{% extends 'base_head.html' %}

{% block head %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/catalog.css' %}">
<!--    {% block title %}Обзор | Crossboost{% endblock %}-->
    {{ block.super }}  
{% endblock %}
{% block navbar %}
    {{ block.super }}  
{% endblock %}
{% block content %}
<main role="main">
    <div class="container">
        <div class="row justify-content-center" style="padding-top: 30px">
            <h2 class="text-center">{{ selected_title }}</h2>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <!-- filter column -->
            <div class="col-lg-4 col-md-4 filter-column">
                {% if not query %}
                <div class="container">
                    <div class="row">
                        <h5 class="text-secondary">Фильтр.</h5>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="filter-card">
                                <article class="filter-group">
                                    <header class="card-header"> <a href="#" data-toggle="collapse" data-target="#collapse_aside1" data-abc="true" aria-expanded="false" class="collapsed">
                                        <i class="icon-control fa fa-chevron-down"></i>
                                            <h6 class="title">Бренд</h6>
                                        </a> </header>
                                    <div class="filter-content collapse" id="collapse_aside1">
                                        <div class="card-body">
                                            <ul class="list-menu">
                                                {% for brand in all_brands %}
                                                    <li class="brand-li">
                                                        <a class="brand-li-header" data-abc="true" data-target="#brandCategories_{{ forloop.counter }}">
                                                            <img src="{{ brand.image.url }}" height="45px%" alt="logo-img">
                                                            {{ brand }}
                                                        </a>
                                                        <ul class="categories-ul" id="brandCategories_{{ forloop.counter }}">
                                                            {% for category in brand.categories.all %}
                                                                <li data-id="/browse/{{ brand }}/{{ category }}" class="categories-li">
                                                                    <span class="categories-link" href='/browse/{{ brand }}/{{ category }}' data-abc="true">{{ category }}</span></li>
                                                                {% for shoe in shoes %}
                                                                    {% if shoe.parent == category %}
                                                                        <li class="shoes-li" data-id="/browse/shoe/{{shoe.id}}">
                                                                            <img src="{{ shoe.image.url }}" style="max-width:40px" alt="shoe image thumbnail">
                                                                            <span class="text-secondary" data-abc="true">{{ shoe }}</span>
                                                                        </li>
                                                                    {% endif %}
                                                                {% endfor %}

                                                            {% endfor %}
                                                        </ul>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </div>
                                    </div>
                                </article>
                                <article class="filter-group">
                                    <header class="card-header">
                                        <a href="#" data-toggle="collapse" data-target="#collapse_aside3" data-abc="true" aria-expanded="false" class="collapsed">
                                            <i class="icon-control fa fa-chevron-down"></i>
                                            <h6 class="title">Цена </h6>
                                        </a>
                                    </header>
                                    <div class="filter-content collapse" id="collapse_aside3" style="">
                                        <div class="price-filter justify-content-center">
                                            <form>
                                                <div class="form-row">
                                                    <div class="form-group col-md-6 col-12">
                                                        <label>Мин.</label>
                                                        <input class="form-control w-75" placeholder="₽" name="min" min="0" type="number" value={{min_price}}>
                                                    </div>
                                                    <div class="form-group text-right col-md-6 col-12">
                                                        <label>Макс.</label>
                                                        <input class="form-control w-75" placeholder="₽" name="max" min="0" type="number" value={{max_price}}>
                                                    </div>
                                                </div>
                                                <button href="#" class="highlight-button btn btn-medium button xs-margin-bottom-five" data-abc="true">Применить</button>
                                            </form>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
            <!-- end filter column -- 
               product grid column -->
            <div id="items-div" class="items col-lg-8 col-md-8">
                <div class="row wow fadeIn catalog-column justify-content-center">
                    {% if not shoe_search %}
                    {% for shoe in shoes %}
                    <div class="align-content-around card border-0 col-lg-3 col-md-6 col-sm-6 mb-5" id="card">
                        <div id="card-upper">
                            <a href="/shoe/{{shoe.id}}">
                                <img src="{{shoe.image.url}}" alt="" width="100%">
                            </a>
                        </div>
                            <div class="card-middle text-center">
                                <h5>
                                    <strong>
                                        <a href="/shoe/{{shoe.id}}" class="text-dark">{{shoe.name}}</a>
                                    </strong>
                                </h5>
                                <!-- <h6 class="text-secondary">{{shoe.color}}</h6> -->

                            </div>
                        <div class="card-bottom">
                            <h5 class="font-weight-bold">
                                    ₽{{shoe.price}}
                            </h5>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <div>
                        <h6>Результаты поиска для "{{ query }}"</h6>
                    </div>
                    {% for shoe in shoe_search %}
                        <div class="card border-0 col-lg-3 col-md-6 col-sm-6 mb-5">
                            <a href="/shoe/{{shoe.id}}">
                                <img src="{{shoe.image.url}}" alt="" width="100%">
                            </a>
                            <div class="card-body text-center">
                                <a href="/shoe/{{shoe.id}}" class="text-secondary">
                                    <h6>{{shoe.model}}</h6>
                                </a>
                                <h5>
                                    <strong>
                                        <a href="/shoe/{{shoe.id}}" class="text-dark">{{shoe.name}}</a>
                                    </strong>
                                </h5>
                                <!-- <h6 class="text-secondary">{{shoe.color}}</h6> -->
                                <h5 class="font-weight-bold">
                                    ₽{{shoe.price}}
                                </h5>
                            </div>
                        </div>
                    {% endfor %}
                    {% endif %}
                </div>
            </div>
            <!-- end product grid column -->
        </div>
    </div>
<script src="{% static 'js/catalog.js' %}"></script>
<script src="{% static 'js/size-selection.js' %}"></script>
<script>

</script>


</main>
{% endblock %}